<div class="console-sub-title">
    广告管理
    <div data-g-loading-tip data-g-is-loading="isLoading" data-g-is-successed="isSuccessed"></div>
</div>

<div class="form-inline search-con">
    <div class="form-group">
        <select class="form-control" ng-model="searchParams.key">
            <option value="title">广告标题</option>
            <option value="content">广告内容</option>
            <option value="id">广告id</option>
        </select>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="输入关键字"
               ng-model="searchParams.val">
    </div>
    <div class="dib mlr10">
        <label>状态:</label>
        <label class="radio-inline">
            <input type="radio" name="statusRadios" id="inlineRadio4" value="" ng-model="searchParams.status"> 全部
        </label>
        <label class="radio-inline">
            <input type="radio" name="statusRadios" id="inlineRadio5" value="1" ng-model="searchParams.status"> 正常
        </label>
        <label class="radio-inline">
            <input type="radio" name="statusRadios" id="inlineRadio6" value="0" ng-model="searchParams.status"> 屏蔽中
        </label>
    </div>
    <button type="button" class="btn btn-default" ng-click="searchAdvertisementsData()">筛选</button>
    <button type="button" class="btn btn-default" ng-click="resetAdvertisementsData()">重置</button>
</div>
<div class="form-inline clearfix" style="margin-bottom: 10px;">
    <button type="button" class="btn btn-default pull-right" data-toggle="modal" data-target="#advertisement-preview"
            ng-click="previewAdvertisement()">
        预览效果
    </button>
    <button type="button" class="btn btn-default pull-right" data-toggle="modal" data-target="#advertisement-detail"
            ng-click="showBarSelect()">
        新建
    </button>
    <!--<button type="button" class="btn btn-danger pull-right" ng-click="deleteAdvertisement()">删除</button>-->
    <button type="button" class="btn btn-danger pull-right" ng-click="chgAdvertisementsStatus(0)">屏蔽</button>
    <button type="button" class="btn btn-danger pull-right" ng-click="chgAdvertisementsStatus(1)">解除屏蔽</button>
</div>

<div ui-grid="advertisementGridOpts" ui-grid-selection ui-grid-pagination class="grid" style="height:400px;"></div>


<div class="modal " id="advertisement-detail" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" ng-bind="(advertisement.id?'编辑':'新建')+'广告'"></h4>
            </div>
            <form class="form-horizontal" ng-submit="saveAdvertisement()">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="title" class="col-md-2 control-label">广告标题：</label>

                        <div class="col-md-10">
                            <input type="text" class="form-control" id="title" placeholder="广告标题"
                                   ng-model="advertisement.title"
                                   required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="content" class="col-md-2 control-label">广告内容：</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="content" placeholder="广告内容"
                                   ng-model="advertisement.content"
                                   required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="webUrl" class="col-md-2 control-label">广告web链接：</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="webUrl" placeholder="广告web链接"
                                   ng-model="advertisement.webUrl"
                                   required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="webUrl" class="col-md-2 control-label">图片比例：</label>
                        <div class="row">
                            <div class="col-md-2">
                                <input type="number" class="form-control" id="picFormatA"
                                       value="{{advertisement.picFormat | picFormatSizeFilter:0}}"
                                       required ng-model="advertisement.picFormatA">

                            </div>
                            <div class="col-md-2">
                                *
                            </div>
                            <div class="col-md-2">
                                <input type="number" class="form-control" id="picFormatB"
                                       value="{{advertisement.picFormat | picFormatSizeFilter:1}}"
                                       required ng-model="advertisement.picFormatB">
                            </div>

                        </div>
                    </div>
                    <div class="form-group">
                        <label for="timeInterval" class="col-md-2 control-label">广告轮播时间间隔：</label>
                        <div class="col-md-10">
                            <input type="number" class="form-control" id="timeInterval" placeholder="广告轮播时间间隔"
                                   ng-model="advertisement.timeInterval"
                                   required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="sortBy" class="col-md-2 control-label">排序：</label>
                        <div class="col-md-10">
                            <input type="number" class="form-control" id="sortBy" placeholder="排序"
                                   ng-model="advertisement.sortBy"
                                   required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="status" class="col-md-2 control-label">状态：</label>

                        <div class="col-md-10">
                            <select class="form-control" id="status" ng-model="advertisement.status" required
                                    ng-options="l.val as l.txt for l in stutasOpts">
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="barsSelect">
                        <label for="barsSelect" class="col-md-2 control-label">选择活动：</label>
                        <div class="col-md-10">
                            <select class="form-control" ng-model="advertisement.barId"
                                    ng-options="l.id as l.name for l in bars" required>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="imageFile">请选择要上传广告图片<font color="red">（**请上传图片）</font></label>
                        <input id="imageFile" type="file" ngf-select="" ng-model="imageFile" name="imageFile">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger" ng-bind="advertisement.id?'修改':'新建'"></button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal" id="advertisement-preview" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">广告效果预览</h4>
            </div>
            <div class="modal-body">
                <div class="container" style="width: 300px">
                    <div class="row" id="advertisementView">

                        <!--<div  style="float: left">-->
                            <!--<img src="https://bucket-puputuan.oss-cn-shenzhen.aliyuncs.com/puputuan/advertise/ad.png" height="200px" width="200px">-->
                        <!--</div>-->
                        <!--<div style="float: left"><img src="https://bucket-puputuan.oss-cn-shenzhen.aliyuncs.com/puputuan/advertise/ad.png" height="100px;" width="100px"></div>-->

                        <!--<div  style="float: left"><img src="https://bucket-puputuan.oss-cn-shenzhen.aliyuncs.com/puputuan/advertise/ad.png" height="100px" width="100px"></div>-->

                        <!--<div class='col-xs-8'>2_2-->
                            <!--<div class='col-xs-12'></div>-->
                            <!--<div class='col-xs-12'></div>-->
                        <!--</div>-->
                        <!--<div class='col-xs-4'>1_1</div>-->
                        <!--<div class='col-xs-4'>1_1</div>-->
                        <!--<div class='col-xs-12'>2_3-->
                            <!--<div class='col-xs-12'></div>-->
                            <!--<div class='col-xs-12'></div>-->
                        <!--</div>-->
                        <!--<div class='col-xs-12'>3_3-->
                            <!--<div class='col-xs-12'></div>-->
                            <!--<div class='col-xs-12'></div>-->
                            <!--<div class='col-xs-12'></div>-->
                        <!--</div>-->

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>